<%--
  作者: 邰苜糠
  创建时间: 2020/10/7
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>课程信息</h5>
                </div>
                <div class="ibox-content">
                    <div <%--style="float: left"--%>style="margin-left: 5%">
                        <button <%--onclick="showEditModal()"--%> type="button" class="btn btn-primary"
                                                                  data-toggle="modal"
                                                                  data-target="#addModal">
                            <i class="fa fa-user-plus"></i>
                        </button>
                        <a onclick=" " href="" class="btn btn-primary "><i class="fa fa-refresh"></i></a>
                    </div>
                    <table class="table table-striped table-bordered table-hover " id=""
                           style="text-align: center;width: 90%;margin-left: 5%;margin-right: 5%">
                        <thead>
                        <tr>
                            <th style="width: 15%;text-align: center">课程编号</th>
                            <th style="width: 20%;text-align: center">课程名称</th>
                            <th style="width: 20%;text-align: center">专业编号</th>
                            <th style="width: 20%;text-align: center">专业名称</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody class="table table-striped table-bordered table-hover" id="tb">

                        </tbody>

                    </table>

<%--                    分页区--%>
                    <div class="margin" style="margin-left: 5%">
                        每一页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                        <option value="2">2</option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                    </select> 条数据，
                        当前是第<span id="currentPageSpan"></span> 页，
                        总共<span id="totalPageSpan"></span> 页
                        <button class="button" onclick="firstPage()">首页</button>
                        <button class="button" onclick="prePage()">上一页</button>
                        <button class="button" onclick="nextPage()">下一页</button>
                        <button class="button" onclick="lastPage()">尾页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<%--添加学生成绩模态框--%>
<div class="modal inmodal" id="addModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" onclick="clearData()" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <i class="fa fa-book modal-icon"></i>
                <h4 class="modal-title">添加课程信息</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="courseIdInput">
                <label class="control-label">课程名称</label>
                <input class="form-control" type="text" id="courseNameInput" placeholder="请输入课程名称" >
                <label class="control-label">专业编号</label>
                <select class="form-control" type="text" id="departmentIdInput">
                    <option value ="1">请选择</option>
                    <option value="40020">40020</option>
                    <option value="40021">40021</option>
                    <option value="40022">40022</option>
                </select>
<%--                <input class="form-control" type="text" id="departmentIdInput" placeholder="请输入课程名称" >--%>
                <label class="control-label">专业名称</label>
<%--                <input class="form-control" type="text" id="departmentNameInput" placeholder="请输入专业名称">--%>
                <select class="form-control" type="text" id="departmentIdInput">
                    <option value ="请选择">请选择</option>
                    <option value="JAVA编程">JAVA编程</option>
                    <option value="H5编程">H5编程</option>
                    <option value="嵌入式编程">嵌入式编程</option>
                </select>
            </div>
            <div class="modal-footer">
                <button class="button btn-primary" onclick="clearData()">取消</button>
                <button class="button btn-primary" onclick="putFormAjax()">确定</button>
            </div>
        </div>
    </div>
</div>


<%--修改学生成绩模态框--%>
<div class="modal inmodal" id="editModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" onclick="clearData()" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <i class="fa fa-book modal-icon"></i>
                <h4 class="modal-title">修改课程信息</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="courseIdEdit">
                <label class="control-label">课程名称</label>
                <input class="form-control" type="text" id="courseNameEdit" placeholder="请输入课程名称">
                <label class="control-label">专业编号</label>
<%--                <input class="form-control" type="text" id="departmentIdEdit" placeholder="请输入专业编号">--%>
                <select class="form-control" type="test" id="departmentIdEdit" >
                    <option value="40020">40020</option>
                    <option value="40021">40021</option>
                    <option value="40021">40022</option>
                </select>
                <label class="control-label">专业名称</label>
<%--                <input class="form-control" type="text" id="departmentNameEdit" placeholder="请输入专业名称">--%>
                <select class="form-control" type="text" id="departmentNameEdit">
                    <option value ="请选择">请选择</option>
                    <option value="JAVA编程">JAVA编程</option>
                    <option value="H5编程">H5编程</option>
                    <option value="嵌入式编程">嵌入式编程</option>
                </select>
            </div>
            <div class="modal-footer">
                <button class="button btn-primary" onclick="clearData()">取消</button>
                <button class="button btn-primary" onclick="putEditAjax()">确定</button>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js?v=3.3.6"></script>


<!-- Peity -->
<script src="${pageContext.request.contextPath}/static/js/plugins/peity/jquery.peity.min.js"></script>

<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/static/js/content.js?v=1.0.0"></script>


<!-- iCheck -->
<script src="${pageContext.request.contextPath}/static/js/plugins/iCheck/icheck.min.js"></script>

<!-- Peity -->
<script src="${pageContext.request.contextPath}/static/js/demo/peity-demo.js"></script>

<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
</script>


<script>
    //当前页码
    var currentPage = 1;
    //每页的记录个数
    var pageSize = 2;
    //总共有多少页
    var totalPage;
    $(function () {
        loadListByPage();
    });

    //用户修改的每页的记录数
    function onSelectChange(){
        pageSize = $("#pageSizeSelect").val()
        loadListByPage();
    }
    //首页的回调方法
    function firstPage(){
        currentPage = 1;
        loadListByPage();
    }
    //上一页回调方法
    function prePage(){
        currentPage--;
        if (currentPage < 1){
            currentPage = 1;
        }
        loadListByPage();
    }
    //下一页回调方法
    function nextPage(){
        currentPage++;
        if (currentPage > totalPage){
            currentPage = totalPage;
        }
        loadListByPage();
    }
    //尾页回调方法
    function lastPage(){
        currentPage = totalPage;
        loadListByPage();
    }

    //分页加载用户列表数据
    function loadListByPage(){
        $.ajax({
           url:"${pageContext.request.contextPath}/user/pageCourse",
            type:'get',
            data:{"currentPage":currentPage,"pageSize":pageSize},
            dataType:'json',
            success:function (result) {
                if (result.code == 0){
                    showList(result.courseList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }

        });
    }



    $(function () {
        loadList();
    });

    //发送编辑好修改后的数据
    function putEditAjax() {
        var courseIdEditVal = $("#courseIdEdit").val();//获取修改模态框中的值
        var courseNameEditVal = $("#courseNameEdit").val();//获取修改模态框中的课程名称
        var departmentIdEditVal = $("#departmentIdEdit").val();//获取修改模态框中的专业编号
        var departmentNameEditVal = $("#departmentNameEdit").val();//获取修改模态框中的专业名称
        var dataValue = {
            "courseId": courseIdEditVal,
            "courseName": courseNameEditVal,
            "departmentId": departmentIdEditVal,
            "departmentName": departmentNameEditVal,
        };
        $.ajax({
            url: "${pageContext.request.contextPath}/course/editOneCourse",
            type: 'post',
            contentType: "application/x-www-form-urlencoded",
            dataType: 'json',
            data: dataValue,
            success: function (result) {
                if (result.code == 0) {
                //     parent.layer.msg("修改学生信息失败", {icon: 2, time: 2000});
                //     clearData()//关闭并清空模态编辑框
                //     loadList();//刷新页面
                // } else {
                    parent.layer.msg("修改学生信息成功", {icon: 1, time: 2000});
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //加载课程列表数据
    function loadList() {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/queryAllCourseDepartment",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.courseList);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //显示课程和专业的信息
    function showList(courseList) {
        var html = '';
        for (var i = 0; i < courseList.length; i++) {
            var item = courseList[i];
            console.log(JSON.stringify(item));
            html += "<tr>";
            html += "<td> " + item.courseId + "</td>";
            html += "<td>" + item.courseName + "</td>";
            html += "<td> " + item.departmentId + "</td>";
            html += "<td> " + item.departmentName + " </td>";
            html += "<td><button class='btn btn-primary' onclick='getUserDetail(\"" + item.courseId + "\")'><i class=\"fa fa-edit\"></i></button>" +
                "&nbsp<button onclick='deleteOneCourse(\"" + item.courseId + "\")' class='btn btn-primary'><i class=\"fa fa-trash\"></button></td>";
            html += "</tr>";
        }
        $("#tb").html(html);
    }


    //编辑需要获取当前的课程信息
    function getUserDetail(courseId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/currentOneCourse",
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            data: {"courseId": courseId},
            success: function (result) {
                if (result.code == 0) {

                    //自动在模态框中显示值
                    console.log(JSON.stringify(result));

                    $("#courseIdEdit").val(result.courses.courseId);
                    $("#courseNameEdit").val(result.courses.courseName);
                    $("#departmentIdEdit").val(result.courses.departmentId);
                    $("#departmentNameEdit").val(result.courses.departmentName);

                    //专业编号和专业名称不可以修改
                    $("#departmentIdEdit").attr("disabled", "disabled");
                    $("#departmentNameEdit").attr("disabled", "disabled");
                    $('#editModal').modal('show')
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    /*点击确定按钮向数据库添加该学生信息*/
    function putFormAjax() {
        var courseNameVal = $("#courseNameInput").val();//获取输入的课程名称
        var departmentIdVal = $("#departmentIdInput").val();//获取输入的专业编号
        var departmentNameVal = $("#departmentNameInput").val();//获取输入的专业名称
        var dataValue = {
            courseName: courseNameVal,
            departmentId: departmentIdVal,
            departmentName: departmentNameVal,
        };
        console.log(dataValue);
        /*$("#editModal").modal("show");*/

        //通过Ajax把数据传给后台
        $.ajax({
            url: "${pageContext.request.contextPath}/course/addCourseDepartment",
            type: 'post',
            contentType: "application/x-www-form-urlencoded",
            dataType: 'json',
            data: dataValue,
            success: function (result) {
                if (result.code == 0) {
                    parent.layer.msg(result.message, {icon: 1, time: 2000});
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //逻辑删除一个课表
    function deleteOneCourse(courseId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/course/deleteOneCourse",
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            data: {"courseId": courseId},
            success: function (result) {
                if (result.code == 0) {
                    parent.layer.msg("删除成功", {icon: 1, time: 2000});//成功提示
                    window.location.reload();
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //关闭模态框并清空模态框中的数据
    function clearData(){
        //添加模态框清空
        $("#courseIdInput").val("");
        $("#courseNameInput").val("");
        $("#departmentIdInput").val("")
        $("#departmentNameInput").val("");

        //编辑模态框清空
        $("#courseIdInput").val("");
        $("#courseNameInput").val("");
        $("#departmentIdInput").val("");
        $("#departmentNameInput").val("");
        $("#addModal").modal("hide");
        $("#editModal").modal("hide");

    }

</script>
</body>
</html>
